<template>
  <!-- 新品首发详情 -->
  <div class="sonFirstPublish">
    <returnPage></returnPage>
    <!-- 轮播banner -->
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in banner" :key="index">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
    <van-swipe-cell>
      <van-card
        num="1"
        :price="sonFirstPublish.retailPrice"
        :desc="sonFirstPublish.brief"
        :title="sonFirstPublish.name"
        class="goods-card"
        :thumb="sonFirstPublish.picUrl"
      />
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
    <van-cell title="规格" is-link value="请选择" />
    <van-cell title="属性" is-link />
    <van-cell title="运费" value="满88免邮费" />
    <div class="sp">
      <div>商品详情</div>
      <div v-html="sonFirstPublish.detail"></div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="star-o" text="收藏" @click="onClickIconk" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        @click="onClickIconc"
      />

      <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcond" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="onClickButton"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButtonm"
      />
    </van-goods-action>
  </div>
</template>

<script>
import {Toast} from "vant";
// import { collect } from '../../api/home'
import request from "../../utils/request";
export default {
  name: "sonFirstPublish",
  components: {},
  data() {
    return {
      sonFirstPublish: "",
      banner: "",
      goodsId: "",
      productId: "",
      number: "",
      type: 0,
      detail: "",
    };
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted() {
    // 新品首发详情
    request("goods/detail", {params: {id: this.$route.query.id}}).then(
      (res) => {
        const {data} = res.data;
        this.sonFirstPublish = data.info;
        this.banner = data.info.gallery;
        this.goodsId = data.productList[0].goodsId;
        this.productId = data.productList[0].id;
        this.detail = data.info.detail.replace(
          /<img/g,
          "< img style='max-width:100%;height:auto;display:block;'"
        );
        // console.log(this.detail)
      }
    );
  },
  methods: {
    onClickIconk() {
      // collect({ valueId: '1181254', type: 0 }).then((res) => {
      //   // {valueId: "1181254", type: 0}
      //   console.log(res)
      // })
      request
        .post("collect/addordelete", {valueId: this.goodsId, type: 0})
        .then((res) => {
          // console.log(res)
          Toast("收藏" + res.data.errmsg);
        });
      this.$login();
    },
    onClickIcond() {
      console.log("店铺");
      this.$login("/car");
    },
    onClickButtonm() {
      console.log("立即购买");
      this.$login();
    },
    onClickIconc() {
      this.$login("/car");
    },
    onClickButton() {
      this.$login();
      request("cart/goodscount").then((res) => {
        const num = res.data.data + 1;
        this.number = num;
      });
      request
        .post("cart/add", {
          goodsId: this.goodsId,
          number: 1,
          productId: this.productId,
        })
        .then((res) => {
          // console.log(res)
          // console.log(this.number)
          Toast("加入购物车" + res.data.errmsg);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.sonFirstPublish {
  // 轮播图
  .my-swipe {
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      text-align: center;
      height: 375px;
      img {
        width: 100%;
      }
    }
  }
  .van-goods-action {
    z-index: 1;
  }
  .sp {
    text-align: center;
  }
}
img {
  width: 100%;
}
</style>
